<template>
  <el-table v-loading="props.loading" :data="props.list" :fit="true" border @selection-change="handleSelectionChange" @current-change="handleCurrentChange"
    id="tableSelet" class="tableSelet" empty-text="-" :highlight-current-row="props.current">
    <el-table-column type="selection" width="65" v-if="selection" />
    <el-table-column type="index" width="80" label="序号" />
    <el-table-column :label="item.title" align="center" :prop="item.dataIndex" :show-overflow-tooltip="true" v-for="(item, index) in props.content"
      :fixed="item.fixed" :key="index" :width="item.width">
      <!-- 自定义插槽 -->
      <template v-if="item.slot" #default="scope">
        <slot :name="item.key" v-bind="scope"></slot>
      </template>
      <template #default="scope" v-else>
        <span v-if="item.render">{{
          item.render(scope.row[item.dataIndex],scope.row)
        }}</span>
        <image-preview v-else-if="item.isImg" :src="scope.row[item.dataIndex]" :width="50" :height="50" />
        <el-button v-else-if="item.isFile&&scope.row[item.dataIndex]"
          @click.stop="previewFun(scope.row[item.dataIndex],item.title,item.dialogTitle)">{{item.fileName?scope.row[item.fileName]:'查看'}}</el-button>
        <span v-else-if="!scope.row[item.dataIndex]&&scope.row[item.dataIndex]!=0">-</span>
        <span v-else>{{ scope.row[item.dataIndex]=='null'?'-':scope.row[item.dataIndex] }}</span>
      </template>

    </el-table-column>
    <!-- <el-table-column label="操作" fixed="right" min-width="80" class-name="small-padding" v-if="!props.isCor">
      <template #default="scope">
        <el-button @click="handleFlowDetail(scope.row)" icon="Tickets" link type="primary" size="small">申请表</el-button>
      </template>
    </el-table-column> -->
  </el-table>

  <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
  <Viewer ref="fileViewerRef" :dialog-doc="dialogDoc" />
</template>

<script setup>
import { defineProps } from "vue";
import Viewer from "@/components/Custom/viewer.vue";
const emit = defineEmits(["getList", "handleFlowDetail", 'handleCurrentChange', 'handleSelectionChange']);
const props = defineProps({
  loading: {
    type: Boolean,
  },
  content: {
    type: Array,
  },
  list: {
    type: Array,
  },
  queryParams: {
    type: Object,
  },
  total: {
    type: Number,
  },
  isCor: {
    type: Boolean,
  },
  isSelection: { type: Boolean, },
  current: { type: Boolean, },
  selection: { type: Boolean, },
  fileName: { type: String, },
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;

// 总条数
const total = ref(props.total);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    category: null,
    key: null,
    tenantId: null,
    deployTime: null,
    derivedFrom: null,
    derivedFromRoot: null,
    parentDeploymentId: null,
    engineVersion: null,
  },
});
const dialogDoc = ref(false)
const fileViewerRef = ref(null);
watch(() => props.total, value => {
  total.value = value
}, { deep: true, immediate: true })
/** 查询流程定义列表 */
function getList() {
  emit("getList");
}

function handleFlowDetail(row) {
  emit("handleFlowDetail", row);
}


// 多选框选中数据
function handleSelectionChange(selection) {
  // ids.value = selection.map((item) => item.procInsId);
  // single.value = selection.length !== 1;
  // multiple.value = !selection.length;
  let fileList = selection.map(item => item[props.fileName]);
  emit('handleSelectionChange', selection)

}
// 预览
const previewFun = (file, prefixName, dialogTitle) => {
  dialogDoc.value = true;
  let data = {};
  // 上传过的文件组成完成的网络路径
  if (file && file.indexOf(',') == -1) {
    data.src = `${baseUrl}${file}`;
  } else if (file && file.indexOf(',') != -1) {
    let src = file.split(',');
    let srcArr = []
    src.forEach(item => { srcArr.push(`${baseUrl}${item}`) })
    data.src = srcArr.join(',');
    file = srcArr[0]
  }

  const arr = file.split(".");
  const suffix = arr[arr.length - 1];
  if (suffix == "docx" || suffix == "doc") {
    fileViewerRef.value?.viewDocx(data, prefixName, dialogTitle);
  } else if (suffix == "xlsx" || suffix == "xls") {
    fileViewerRef.value?.viewXlsx(data, dialogTitle);
  } else if (suffix == "jpg" || suffix == "jpeg" || suffix == "png") {
    fileViewerRef.value?.viewImg(data, dialogTitle);
  } else if (suffix == "pdf") {
    fileViewerRef.value?.viewPdf(data, dialogTitle);
  }
};
const handleCurrentChange = (e) => {
  emit("handleCurrentChange", e);
}

const flexColumnWidth = (str, arr1, flag = 'max') => {
  // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
  // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
  // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
  str = str + ''
  let columnContent = ''
  if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
    return
  }
  if (!str || !str.length || str.length === 0 || str === undefined) {
    return
  }
  if (flag === 'equal') {
    // 获取该列中第一个不为空的数据(内容)
    for (let i = 0; i < arr1.length; i++) {
      if (arr1[i][str].length > 0) {
        // console.log('该列数据[0]:', arr1[0][str])
        columnContent = arr1[i][str]
        break
      }
    }
  } else {
    // 获取该列中最长的数据(内容)
    let index = 0
    for (let i = 0; i < arr1.length; i++) {
      if (arr1[i][str] === null) {
        return
      }
      const now_temp = arr1[i][str] + ''
      const max_temp = arr1[index][str] + ''
      if (now_temp.length > max_temp.length) {
        index = i
      }
    }
    columnContent = arr1[index][str]
  }
  // console.log('该列数据[i]:', columnContent)
  // 以下分配的单位长度可根据实际需求进行调整
  let flexWidth = 0
  for (const char of columnContent) {
    if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
      // 如果是英文字符，为字符分配8个单位宽度
      flexWidth += 8
    } else if (char >= '\u4e00' && char <= '\u9fa5') {
      // 如果是中文字符，为字符分配15个单位宽度
      flexWidth += 15
    } else {
      // 其他种类字符，为字符分配8个单位宽度
      flexWidth += 8
    }
  }
  if (flexWidth < 80) {
    // 设置最小宽度
    flexWidth = 80
  }
  // if (flexWidth > 250) {
  //   // 设置最大宽度
  //   flexWidth = 250
  // }
  return flexWidth + 'px'
}

</script>

<style></style>
